<template>
	<view class="work_record">
		<view class="item-search">
			<u-search ref="search" class="search-input" placeholder="请输入关键字" @clear="clearSearch" v-model="searchText" :showAction="false" clearabled @search="entryBtn" @change="entryBtn"></u-search>
			<view class="item-right" @click="isShowSelect = true">
				<text>{{ leftText }}</text>
				<u-icon name="arrow-down" color="#2979ff" size="20"></u-icon>
			</view>
		</view>
		<u-picker :show="isShowSelect" :columns="leftList" keyName="value" @cancel="isShowSelect = false" :immediateChange="true"
			@confirm="fnSure"></u-picker>
		<scroll-view scroll-y="true" :style="{height:scrollHeight}">
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="recordList.length ==0"></u-empty>
			<view class="item_box" v-for="(item, index) in recordList"  :key="index">
				<view @click="fnNavTo(item.id,item.constructionMethod)" class="fill-record-item">
					<view class="title">
						<view class="title-text">{{ dictMap['construction_method'].find(it => it.code === item.constructionMethod).name || null }}</view>
						<view v-if="item.isTemporary"  class="title-label daishangbao">
							<text>待上报</text>
						</view>
						<view v-else :class="item.reviewStatus === 'dsh'  ? 'daishenhe': (item.reviewStatus === 'tg' ? 'tongguo' : (item.reviewStatus === 'wtg' ? 'weitongguo': ''))" class="title-label">
							<text >{{ item.reviewStatus === 'dsh' ? '待审核': (item.reviewStatus === 'tg' ? '通过' : (item.reviewStatus === 'wtg' ? '未通过': ''))}}</text>
						</view>
					</view>
					
					<view style="margin-top: 16upx; line-height: 28upx; font-size: 24upx; color: #6a819e; display: flex; align-items: center;">
						<u-icon name="clock" color="#6a819e" size="16"></u-icon>
						<text style="margin-left: 4upx;">提交时间：{{getDate2(item.recordCreateDate)}} | {{item.createUserName}}</text>
					</view>
					<view style="margin-top: 26upx; line-height: 28upx; font-size: 28upx; color: #53657C; display: flex; align-items: center;">
						<text style="margin-left: 4upx;">{{`${item.lineName}${item.branchLineName ? '(' + item.branchLineName + ')' : ''}`  || ""}}  {{item.lineSiteSectionName || ''}}</text>
					</view>
					
					<view style="margin-top: 16upx; line-height: 28upx; font-size: 26upx; color: #6a819e; display: flex; align-items: center;">
						<text style="margin-left: 4upx;">施工日期：{{getDate(item.constructionDate)}}</text>
					</view>
					<view @click.stop="fnClickBtn(item)" v-if="item.isTemporary" style="display: flex; align-items: center; justify-content: center; height: 96upx; background: #f5f7fa; border-radius: 4upx; margin: 40upx 0 20rpx 0;">
						<image src="/static/image/tianbao.png" mode="aspectFill" style="width: 32upx; height: 32upx; margin-right: 10upx;"></image>
						<view style="color: #2F80ED; font-weight: bold;">
							{{(item.isTemporary && item.reviewStatus !== 'wtg') ? '继续填报' : '重新填报'}}
						</view>
					</view>
					<view @click.stop="fnClickBtn(item)" v-if="item.reviewStatus !== 'tg' && item.reviewStatus !== 'dsh'" style="display: flex; align-items: center; justify-content: center; height: 96upx; background: #f5f7fa; border-radius: 4upx; margin: 40upx 0 20rpx 0;">
						<image src="/static/image/tianbao.png" mode="aspectFill" style="width: 32upx; height: 32upx; margin-right: 10upx;"></image>
						<view style="color: #2F80ED; font-weight: bold;">
							{{(item.isTemporary && item.reviewStatus !== 'wtg') ? '继续填报' : '重新填报'}}
						</view>
					</view>
				</view>
			</view>
			<u-divider text="已加载全部数据" style="margin:0;" v-if="recordList.length >= total && recordList.length >0"></u-divider>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getListByUser,
		pmProcessReportGetDetail
	} from '@/api/comprehensive/comprehensive.js'
	import mixins from '@/utils/mixins.js'
	import { mapGetters } from "vuex"
	export default {
		mixins: [mixins],
		components: {

		},
		computed: {
			...mapGetters(['dictMap']),
			scrollHeight() {
				// #ifdef APP-PLUS || H5
					return `calc(100vh - 300rpx)`
				// #endif

				// #ifdef MP-WEIXIN 
					return 'calc(100vh - 400rpx)'
				// #endif 
			}
		},
		watch: {
			searchText(newVal, oldVal) {
				// if (newVal) {
				// 	this.searchText = newVal
				// 	this.getDataList()
				// }
			}
		},

		data() {
			return {
				searchText: '',
				leftText: '全部',
				reviewStatuss: '', //审核状态从字典表获取
				isTemporary: undefined,
				badgeNum: 0,
				recordList: [], //列表数据
				isShowSelect: false,
				leftList: [
					[{
							code: 'dsh',
							value: '待审核'

						},
						{
							code: 1,
							value: '待上报'
						},
						{
							code: 'wtg',
							value: '未通过'
						},
						{
							code: 'tg',
							value: '通过'
						},
						{
							code: '',
							value: '全部'
						}
					]
				],
				total:0,
			}
		},
		mounted() {
			this.getDataList();

		},
		onShow() {
			this.getDataList();
		},

		methods: {
			fnNavTo(id, type) {
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/wokDetail?id=${id}&dataType=${type}`
				})
			},

			// 获取填报记录列表
			getDataList() {
				let resq = {
					currPage: 1,
					pageSize: 10000,
					params: {
						projectId:uni.getStorageSync('isOwner'),
						reviewStatuss: this.reviewStatuss, // 审核状态（字典表-review_status）
						keyword: this.searchText, // 项目名称、线路、区间/站点、提交人
						isTemporary: this.isTemporary, //暂存标识 null或不传：查询全部  只查询暂存的记录(1) 只查询非暂存的记录(0)
					}
				}
				getListByUser(resq).then(res => {
					if (res.result.list) {
						this.recordList = res.result.list || []
						this.total = res.result.total || 0
						// 父组件红色badge角标 
						//继续填报”和“重新上报”的记录数量在“在填报记录”上显示红色角标
						let sum = []
						for (let i = 0; i < this.recordList.length; i++) {
							if (this.recordList[i].isTemporary || this.recordList[i].reviewStatus === 'wtg') {
								sum.push(this.recordList[i])
							}
						}
						this.badgeNum = sum.length
						this.$emit('sendBadge', this.badgeNum)
						// console.log(this.badgeNum,'总数')
					}
					// console.log(res, '填报记录列表')
				})
			},
			//继续填报和重新上报按钮事件
			fnClickBtn(item) {
				// console.log(this.$store.state.selectRings.isNeedDisabled,'看看vuex');
				// let bool =  this.$store.state.selectRings.isNeedDisabled = true
				pmProcessReportGetDetail({
					id: item.id
				}).then(res => {
					// console.log(res.result, '详情')
					if (res.status === 1 && res.success) {
						let result = res.result
						uni.navigateTo({
							url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/progressFilling?isContinue=true&recordForm=${JSON.stringify(result)}`,
						})
					}
				})

			},
			//左侧切换事件
			/**
			 * 1.全部时isTemporary字段不传
			 * 2.待审核时 只有提交后的才能审核  isTemporary:0 审核状态
			 * 3.待上报时 isTemporary:1	审核状态
			 * 4.未通过 isTemporary:0 还有审核状态
			 * 5.通过	isTemporary:0 还有审核状态
			 * 
			 * **/
			fnSure(val) {
				// console.log(val)
				const status = val.value[0].code
				if(status === '') {
					this.reviewStatuss = ''
					this.isTemporary = undefined
				}
				if(status === 1) {
					this.reviewStatuss = ''
					this.isTemporary = 1
				}
				if(status === 'dsh') {
					this.isTemporary = 0
					this.reviewStatuss = 'dsh'
				}
				if(status === 'tg') {
					this.isTemporary = 0
					this.reviewStatuss = 'tg'
				}
				if(status === 'wtg') {
					this.isTemporary = 0
					this.reviewStatuss = 'wtg'
				}
				this.leftText = val.value[0].value
				this.getDataList()
				this.isShowSelect = false
			},
			//搜索框
			entryBtn(val){
				this.searchText = val
				this.getDataList()
			},
			clearSearch() {
				this.searchText = ''
				this.getDataList()
			},
			

		}
	}
</script>

<style lang="scss" scoped>
	.work_record {
		background-color: #f5f7fa;
		height: 100%;
	}

	.record_title {
		padding: 16rpx 30rpx;
		background-color: #f5f5f9;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title_sel {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 200rpx;
			height: 80rpx;
			background-color: #dfeff9;
			flex: 1;
			margin-right: 30rpx;
		}

		.title_right {
			flex: 3;
		}
	}

	.item_box {
		background-color: #fff;
		// padding: 20rpx 30rpx;
		line-height: 65rpx;
		margin: 20rpx;
		border-radius: 10rpx;
		.item_title {
			display: flex;
			justify-content: space-between;
		}

		.item_line {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.red_stu {
		color: red;
	}

	.green_stu {
		color: #13bc75;
	}

	.blue_stu {
		color: #118ee9;
	}
	
	.fill-record-item {
		background: #fff;
		border-radius: 20upx;
		padding: 20upx 26upx;
		
		.title {
			color: #445469;;
			font-weight: bold;
			display: flex;
			// justify-content: space-between;
			font-size: 32rpx;
			align-items: center;
			
			.title-text {
				margin-right: 20rpx;
				line-height: 40upx;
				max-width: 456upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.title-label {
				color: #fff;
				font-size: 28upx;
				width: 108upx;
				line-height: 34upx;
				position: relative;
				text-align: center;
				display: none;
				
				&::before {
					content: "";
					position: absolute;
					top: 0; right: 0; bottom: 0; left: 0;
					transform: skew(-15deg);
				}
				
				text {
					position: relative;
					line-height: inherit;
				}
			}
			
			.weitongguo {
				display: block;
				&::before {
					background: linear-gradient(90deg, #FF2B2B 0%, #FF5D3C 100%);
				}
			}
			.tongguo {
				display: block;
				&::before {
					background: linear-gradient(90deg, #19C585 0%, #61C9A5 100%);
				}
			}
			.daishenhe {
				display: block;
				&::before {
					 background: linear-gradient(90deg, #FF882B 0%, #FF9F3D 100%);
				}
			}
			.daishangbao {
				display: block;
				&::before {
					 background: linear-gradient(90deg, #5295FE 0%, #3FB8FF 100%);
				}
			}
		}
	
		.image-list {
			display: flex;
			flex-wrap: wrap;
			margin: 32upx 0 14upx;
			
			image {
				width: 204upx;
				height: 174upx;
				margin-right: 10upx;
				margin-bottom: 10upx;
			}
		}
	}
</style>
